<template>
  <!-- 班级 和 头像 新增 待处理 -->
  <div class="updateStudent">
    <h3>修改学生信息</h3>
    <p>
      <label for="updateStuName">姓名</label><br/>
      <input type="text" id='updateStuName' v-model.lazy='updateStudentData.name'>
    </p>
    <p>
      <label for="updateStuAge">年龄</label><br/>
      <input type="number" id="updateStuAge" v-model.lazy='updateStudentData.age'>
    </p>
    <p>性别
      <label for="updateStuMale">男</label><input type="radio" id='updateStuMale' name='updateStuGender' value='male' v-model='updateStudentData.gender'>
      <label for="updateStuFemale">女</label><input type="radio" id="updateStuFemale" name='updateStuGender' value='female' v-model='updateStudentData.gender'>
    </p>
    <!-- 所属班级渲染（目前自增）  -->
    <p>所属班级
      <select name="classList" id="classList" v-model='updateStudentData.classId'>
        <option value="6279d6c77128c33dd907e00d">re</option>
      </select>
    </p>
    <div> 
      <p class="uploadImgBox">选择头像: <input type="file" value="选择头像" id='uploadImg'></p>
      <p> <img style="width:100px;height:100px;" src="http://localhost:3000/img/defaultImg.jpg" alt="stuImage" id="stuImageUpload"> </p>
    </div>
    <p><input type="button" value="确认修改" id="updateStudentBtn" @click='updateStudent()'></p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props:{
    transStudentData:{
      type:Object,
      default:()=>({})
    }
  },
  data(){
    return{
      updateStudentData:this.transStudentData,
    }
  },
  //侦听updateStudentData数据变化
  watch:{
    transStudentData(newVal){
      this.updateStudentData = {...this.transStudentData};
    }
  },
  methods:{
    async updateStudent(){
      const {data} = await axios({
        url:'/students/upgradeStuInfo',
        method:'post',
        data:this.updateStudentData
      })
      if(data.status){
        alert(data.message);
        this.$emit("getStudents")
      }else{
        alert(data.message);
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
